<template>
    <div>
        <iframe sandbox="allow-scripts allow-top-navigation allow-same-origin" scrolling="no" width="300" height="400"
            frameborder="0" allowtransparency="true" :src="setSrc"></iframe>
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps({
    // 应用唯一标识，在微信开放平台提交应用审核通过后获得
    appid: {
        type: String,
        required: true
    },
    // 应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login即可
    scope: {
        type: String,
        required: true
    },
    // 重定向地址，需要进行UrlEncode
    redirect_uri: {
        type: String,
        required: true
    },
    // 用于保持请求和回调的状态，授权请求后原样带回给第三方
    state: {
        type: String,
        default: ''
    },
    // 提供"black"、"white"可选，默认为黑色文字描述
    theme: {
        type: String,
        default: 'black',
        validator: (value: string) => ['black', 'white'].includes(value)
    },
    // 自定义样式链接，第三方可根据实际需求覆盖默认样式
    href: {
        type: String,
        default: ''
    },
    // true：手机点击确认登录后可以在 iframe 内跳转到 redirect_uri
    // false：手机点击确认登录后可以在 top window 跳转到 redirect_uri
    self_redirect: {
        type: String,
        default: 'default',
        validator: (value: string) => ['default', 'true', 'false'].includes(value)
    },
    // sdk的扩展字符串，但是在这里就默认了jssdk，暂时不建议修改
    login_type: {
        type: String,
        default: 'jssdk'
    }
});

const setSrc = computed(() => {
    return `https://open.weixin.qq.com/connect/qrconnect?appid=${props.appid}` +
        `&scope=${props.scope}` +
        `&redirect_uri=${props.redirect_uri}` +
        `&state=${props.state}` +
        `&login_type=${props.login_type}` +
        `&style=${props.theme}` +
        `&self_redirect=${props.self_redirect}` +
        `&href=${props.href}`;
});
</script>